<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢乐豆记录</title>
    <script src="js/jquery-1.9.1.min.js"></script>

    <!-- 引入jquery-ui插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
    <script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
    <!--引入分页-->
    <link rel="stylesheet" type="text/css" href="css/amazeui.css"/>


    <script>
      /*  //页面加载时触发
        $(function () {
            //查询订单记录的接口
            queryOrderList();
        });*/

        /*
         //查询充值订单列表
         function queryOrderList() {
          /*
                         //获取当前登录用户id
                         var uid = localStorage.getItem("uid");

                         $.ajax({
                             type: "GET",
                             url: "http://localhost:8080/order/list",
                             data: {
                                 uid: uid
                             },
                             success: function(data){
                                 console.log(data);

                                 for(var i = 0; i < data.length; i++){
                                     var item = data[i];
                                     var html = "<tr><td>" + item.orderId + "</td> <td>"
                                         + item.money + "</td> <td>"
                                         + item.beanNumber + "</td> <td>"
                                         + item.createTime + "</td> <td>"
                                         + (item.status == 1 ? "已支付" : "<button onclick=\"goPay('" + item.orderId + "')\">去支付</button>") + "</td></tr>";

                                     $("#mytbody").append(html);
                                 }
                             }
                         });
         }*/
        //分页
      $(function(){
          showPage(1);
      });

      function showPage(page){
          //获取 当前登录用户id
          var uid = localStorage.getItem("uid");

          $.ajax({
              type:"GET",
              url: "http://localhost:8080/order/list",
              data:{
                  uid: uid
              },
              dataType:"json",
              success: function(data){
                  console.log(data);
                  var newsTotalNum = data.length;
                  console.log(newsTotalNum);
                  var pageNum = Math.ceil(newsTotalNum/6); //分页的总页数
                  var content = '<table class="table_class">' +
                      '<thead>' + '<tr>' +
                      '<td>订单号</td>'+
                      '<td>充值金额</td>'+
                      '<td>欢乐豆数量</td>'+
                      '<td>下单时间</td>'+
                      '<td>订单状态</td>'+
                      '</tr>' + '</thead>';

                  for(var i=((page-1)*6); i<(page*6)&&i<newsTotalNum;i++){

                      /*  var status = "";
                  /* if(data[i].status == 0){
                        status = "<button onclick=\"goPay('" + item.orderId + "')\">去支付</button>";
                    }else if(data[i].status == 1){
                        status = "已支付";
                    }*/

                      content += '<tbody><tr>' +
                          '<td>'+data[i].orderId+'</td>'+
                          '<td>'+data[i].money+'</td>' +
                          '<td>'+data[i].beanNumber+'</td>' +
                          '<td>'+data[i].createTime+'</td>' +
                          '<td>'+(data[i].status == 1 ? "已支付" : "<button onclick=\"goPay('" + data[i].orderId + "')\">去支付</button>") +'</td>'+
                          '</tr></tbody>';
                  }

                  content += '</table>' +
                      '<div>' +'共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
                      '<div class="am-fr">' +
                      '<ul class="am-pagination" id="page">';
                  //判断前面是否还有页面
                  if(page == 1){
                      content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';
                  }else{
                      content += '<li><a href="javascript:showPage('+(page-1)+')" rel="external nofollow" >«</a></li>';
                  }
                  for(var i=1;i<=pageNum;i++){
                      if(i == page){
                          content += '<li class="am-active"><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                      }else{
                          content += '<li><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                      }
                  }
                  //判断后面是否还有页面
                  if(page == pageNum){
                      content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';
                  }else{
                      content += '<li><a href="javascript:showPage('+(page+1)+')" rel="external nofollow" >»</a></li>';
                  }
                  content += '</ul>' + '</div>' + '</div><hr>';

                  $("#listTag").empty();
                  $("#listTag").append(content);
              }
          });
      }

      /**
         * 去支付
         */
        var orderId = null;

        function goPay(orderid) {
            orderId = orderid;
            //alert("去支付！" + orderid);

            //弹出一个支付成功的弹出框，让用户支付完成后点击
            $("#paydialog").dialog({
                title: "支付中",
                width: 400,
                height: 300
            });

            //打开一个新页签，进行支付宝支付
            window.open("http://localhost:8080/order/pay?orderid=" + orderid);
        }

        /**
         * 支付结果的查询
         */
        function payQuery() {
            // alert("查询支付结果的订单：" + orderId);

            //发送请求给后端，进行订单交易的查询
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/pay/query",
                data: {
                    orderid: orderId
                },
                success: function (data) {
                    //data > 0  支付成功  最新的欢乐豆数量
                    //data -1 支付还未成功
                    if (data > 0) {
                        //支付成功
                        $("#paydialog").dialog("close");
                        //更新浏览器保存的欢乐豆数量
                        localStorage.setItem("happyBean", data);
                    } else {
                        //支付还未成功
                        alert("交易未完成！");
                    }
                }
            });

        }
    </script>
    <style>
        .body_class {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #b2e2fa;
        }

        .table_class {
            width: 100%;
            text-align: center;
        }

        .table_class td {
            padding: 20px;
            border: 1px solid white;
        }

        .table_class thead tr {
            background-color: aquamarine;
        }

        .table_class tbody tr:nth-child(even) {
            background-color: #FFFFFF;
        }

        .table_class tbody tr:nth-child(odd) {
            background-color: gainsboro;
        }


    </style>
</head>
<body class="body_class">
<h1>充值订单列表</h1>
<div>
    <div id="listTag"></div>
</div>
<!--<table class="table_class">
    <thead>
    <tr>
        <td>订单号</td>
        <td>充值金额</td>
        <td>欢乐豆数量</td>
        <td>下单时间</td>
        <td>订单状态</td>
    </tr>
    </thead>
    <tbody id="mytbody">

    </tbody>
</table>-->

<!-- 支付进行中...弹出框 -->
<div id="paydialog" style="display: none;">
    <div style="width: 100%; height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;">
        <span>正在支付.....</span>
        <button onclick="payQuery()" style="margin-top: 40px;">支付已完成</button>
    </div>
</div>

</body>
</html>
